<template>
	<view class="content">
		<img src="../../static/我的预约.png" width="100%" />
		<!-- 空白页 -->
		<empty v-if="dataList.length === 0"></empty>
		
		<!-- 订单列表 -->
		<view 
			v-for="(item,index) in dataList" :key="index"
			class="order-item"
		>
			<view class="goods-box-single">
				<!-- <image class="goods-img" :src="goodsItem.image" mode="aspectFill"></image> -->
				<view class="right">
					<text class="title">
						{{item.goodsName}}
					</text>
				</view>
			</view>
			<view class="i-top b-b">
				<text class="time">预约时间：{{item.reserveDate}} {{item.reserveTime}}</text>
			</view>
			<view class="i-top b-b" v-if="item.tel">
				<text class="time">预约手机号：{{item.tel}}</text>
			</view>
			
			<view class="action-box b-t" >
				<!-- <button class="action-btn" @click="info(item)">查看预约</button> -->
				<button class="action-btn" v-if="item.status === '2'">已失效</button>
				<button class="action-btn" v-if="item.status === '1'">已核销</button>
				<button v-if="item.status === '0'" class="action-btn" @click="cancelAppoint(item)">重新预约</button>
				<button v-if="item.status === '0'" class="action-btn recom" @click="toggleSpec(item)">查看二维码</button>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl">
					您确认重新预约吗？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="cancel">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="confirm">确定</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 规格-模态层弹窗 -->
		<view 
			class="popup spec" 
			:class="specClass"
			@touchmove.stop.prevent="stopPrevent"
			@click="toggleSpec"
		>
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="out-style">
					<view class="shop-outside">
						<view class="shop-info">
							<span>{{qrCodeInfo.goodsName}}</span>
							<!-- <span>￥</span>
							<span>123</span>
							<span>214</span> -->
						</view>
						<view class="code-div">
							<view class="qrcode-item">
								<canvas canvas-id="qrcode" style="margin: auto;width: 215px;height: 215px;border-radius: 10px;" />
							</view>
						</view>
						<view class="text-style">
							<span>请出示二维码进行核销</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template> 

<script>
	import { updateReserveRecord, selectReserveRecordListByOpenid, selectReserveRecordById, updateReserveRecordByCode } from 'api/shop'
	import empty from "@/components/empty";
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		components: {
			empty,
			uQRCode
		},
		data() {
			return {
				modalName: null,
				qrCodeInfo:{},
				dataList:[],
				specClass: 'none',
				item:{}
			};
		},
		
		onLoad(options){
			this.init()
			// this.test()//测试核销
		},
		 
		methods: {
			//取消预约
			cancelAppoint(item){
				this.modalName = 'DialogModal1'
				this.item = item
			},
			cancel(){
				this.modalName = ''
			},
			confirm(){
				let data = {
					status:'2',
					id:this.item.id
				}
				updateReserveRecord(data).then (ret => {
					if(ret.data.errcode === 0){
						this.modalName = ''
						uni.redirectTo({
							url: '/pages/order/createOrder-v2?id='+this.item.spuId
						})
					}else{
						this.$api.msg(ret.data.errmsg);
						return false
					}
				})
			},
			
			test(){
				updateReserveRecordByCode({code:'9e2f3f8b99754d7588557c26384350b4'})
			},
			info(data){
				selectReserveRecordById({id:data.id})
			},
			stopPrevent(){},
			//规格弹窗开关
			toggleSpec(data) {
				if(this.specClass === 'show'){
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				}else if(this.specClass === 'none'){
					this.specClass = 'show';
					this.qrcode(data)
				}
			},
			init(){
				selectReserveRecordListByOpenid().then (ret => {
					if(ret.data.errcode === 0){
						this.dataList = ret.data.data
						for (var i = 0; i < this.dataList.length; i++) {
							this.dataList[i].reserveDate = this.formatDate(this.dataList[i].reserveDate)
							this.dataList[i].createDate = this.formatDate(this.dataList[i].createDate)
						}
					}else{
						this.$api.msg(ret.data.errmsg);
						return false
					}
				})
			},
			formatDate(date) {
			  var date = new Date(date);
			  var YY = date.getFullYear() + '-';
			  var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			  var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
			  var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			  var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			  var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
			  return YY + MM + DD;
			},
			qrcode(data){
				this.qrCodeInfo = data
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: 'shop:'+data.code,
					size: 215,
					margin: 20,
					backgroundColor: '#ffffff',
					foregroundColor: '#0DBB22',
					fileType: 'jpg',
					correctLevel: uQRCode.defaults.correctLevel,
					success: res => {
					  // console.log(res)
					}
				  })
			}
		},
	}
</script>

<style lang="scss">
	page, .content{
		background: $page-color-base;
		height: 100%;
	}
	
	.swiper-box{
		height: calc(100% - 40px);
	}
	.list-scroll-content{
		height: 100%;
	}
	
	.navbar{
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: $base-color;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	.uni-swiper-item{
		height: auto;
	}
	.order-item{
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;
		.i-top{
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right:30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;
			.time{
				flex: 1;
			}
			.state{
				color: $base-color;
			}
			.del-btn{
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;
				&:after{
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
		/* 多条商品 */
		.goods-box{
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;
			.goods-item{
				width: 120upx;
				height: 120upx;
				display: inline-block;
				margin-right: 24upx;
			}
			.goods-img{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		/* 单条商品 */
		.goods-box-single{
			display: flex;
			padding: 20upx 0 0 0 ;
			.goods-img{
				display: block;
				width: 120upx;
				height: 120upx;
			}
			.right{
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 0;
				overflow: hidden;
				.title{
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					line-height: 1.5;
				}
				.attr-box{
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}
				.price{
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					&:before{
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}
		
		.price-box{
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20upx 30upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;
			.num{
				margin: 0 8upx;
				color: $font-color-dark;
			}
			.price{
				font-size: $font-lg;
				color: $font-color-dark;
				&:before{
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}
		.action-box{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}
		.action-btn{
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;
			&:after{
				border-radius: 100px;
			}
			&.recom{
				background: #fff9f9;
				color: $base-color;
				&:after{
					border-color: #f7bcc8;
				}
			}
		}
	}
	
	
	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}
	
	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}
	
	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px
	}
	
	.uni-load-more__img>view {
		position: absolute
	}
	
	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}
	
	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}
	
	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0
	}
	
	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}
	
	.load2 {
		transform: rotate(30deg)
	}
	
	.load3 {
		transform: rotate(60deg)
	}
	
	.load1 view:nth-child(1) {
		animation-delay: 0s
	}
	
	.load2 view:nth-child(1) {
		animation-delay: .13s
	}
	
	.load3 view:nth-child(1) {
		animation-delay: .26s
	}
	
	.load1 view:nth-child(2) {
		animation-delay: .39s
	}
	
	.load2 view:nth-child(2) {
		animation-delay: .52s
	}
	
	.load3 view:nth-child(2) {
		animation-delay: .65s
	}
	
	.load1 view:nth-child(3) {
		animation-delay: .78s
	}
	
	.load2 view:nth-child(3) {
		animation-delay: .91s
	}
	
	.load3 view:nth-child(3) {
		animation-delay: 1.04s
	}
	
	.load1 view:nth-child(4) {
		animation-delay: 1.17s
	}
	
	.load2 view:nth-child(4) {
		animation-delay: 1.3s
	}
	
	.load3 view:nth-child(4) {
		animation-delay: 1.43s
	}
	
	@-webkit-keyframes load {
		0% {
			opacity: 1
		}
	
		100% {
			opacity: .2
		}
	}
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.layer {
			padding: 10%;
			text-align: center;
			position: fixed;
			font-size: 16px;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 50vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;
			.btn{
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}
			100% {
				transform: translateY(0%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(120%);
			}
		}
	}
	.popup .layer{
		bottom: initial;
		top: 20%;
		padding: 0 13%;
		min-height: initial;
		background: inherit;
	}
	.out-style{
		background-image: url("../../static/qrcodeBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.code-style{
		border: 20px solid #fff;
		border-radius: 15px;
	}
	.qrcode-item {
		font-size: 0.75rem;
		display: flex;
		justify-content: center;
	}
	.shop-info {
		padding: 7%;
	}
	.shop-info span{
		color: #FFFFFF;
		letter-spacing: 1px;
	}
	// .shop-info span:nth-child(1){
	// 	font-size: 12px;
	// }
	.shop-outside{
		text-align: center;
	}
	.text-style {
		padding: 8%;
	}
	.text-style span{
		color:  #FFFFFF;
		letter-spacing: 1px;
		font-size: 16px;
	}
	.cu-bar,.cu-dialog{
		border-radius: 10px;
	}
</style>
